{% extends "base.html" %}
{% load static %}
{% block extrahead %}{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %} "/>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/base.css' %} "/>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/global.css' %}"/>
<link rel="stylesheet" type="text/css"
    href="{% static 'admin/css/widgets.css' %}"/>


<script type="text/javascript"
    src="/admin/jsi18n/"></script>
<script type="text/javascript"
    src="{% static 'admin/js/core.js' %}"></script>
<script type="text/javascript"
    src="{% static 'admin/js/admin/RelatedObjectLookups.js' %}"></script>
<script type="text/javascript"
    src="{% static 'admin/js/jquery.js' %}"></script>
<script type="text/javascript"
    src="{% static 'admin/js/jquery.init.js' %}"></script>
<script type="text/javascript"
    src="{% static 'admin/js/actions.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/calendar.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/admin/DateTimeShortcuts.js' %}"></script>
{{ form.media }}
{% endblock %}

{% block content %}
<div class="row clearfix">
    <div class="col-md-4 column">
        {% if messages %}
        {% for message in messages %}
            {{message}}
        {% endfor %}
    {% endif %}
    </div>
    <div class="col-md-4 column">
        <form method="post" action="">{% csrf_token %}
            {{form.as_p}}
            {%if form%}
            <button type="submit" class="btn btn-default">Search</button>
            {% endif %}
        </form>
    </div>
    <div class="col-md-4 column">
    </div>
</div>
<div></div>

<div class="row clearfix">
		<div class="col-md-12 column">
            {% if rooms%}
            <div class="alert alert-dismissable alert-info" contenteditable="true">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
			<h4>Alert!</h4>
			<strong>INFO!</strong> Rooms Available at This Hotel
		</div>
			<div class="panel-group" id="panel-233883">
                {% for room in rooms %}
				<div class="panel panel-default">
					<div class="panel-heading">
						 <a class="panel-title" data-toggle="collapse" data-parent="#panel-233883" href="#panel-element-{{room.0}}">
                             <img alt="140x140" width="120" height="60" src="{% static "img/room.jpg" %}" class="img-thumbnail">
                             {{room.2}}
                         </a>
					</div>
					<div id="panel-element-{{room.0}}" class="panel-collapse collapse">
						<div class="panel-body">
                            <div class="row clearfix">
                                <div class="col-md-4 column">
                                   <span class="label label-info" contenteditable="true">Number Persons:</span> {{room.4}}
                                </div>
                                <div class="col-md-4 column">
                                    <span class="label label-info" contenteditable="true">Price:</span> {{room.3}}
                                </div>
                                <div class="col-md-4 column">
                                    <a href="/hotels/rooms/room_id/{{room.0}}/" class="btn btn-primary btn-sm" role="button">More Details..</a>
                                </div>
                            </div>
						</div>
					</div>
				</div>
                {% endfor %}
			</div>
            {% endif %}
		</div>
	</div>
{%  endblock%}